import React from 'react'
import { useState } from 'react';

import Banner from '../../compoents/Banner'
import Table from '../../compoents/Table';
import Side from '../../compoents/side';


import HomeHttp from '../../apis/home';
import { Breadcrumb } from 'antd';
import { Carousel } from 'antd';
import {Avatar, List, Typography } from 'antd';
import '../../style/home.scss'
export default function HomeRecommand() {
  // 新碟上架的样式
  const contentStyle = {
    width: '130px',
    height: '130px',
    color: '#fff',
    lineHeight: '130px',
    textAlign: 'center',
    background: '#364d79',
  };

  const breadItem = [
    { title: '华语', href: "" },
    { title: '流行', href: "" },
    { title: '摇滚', href: "" },
    { title: '民谣', href: "" },
    { title: '电子', href: "" },
  ]
  // 热门推荐
  const [hot, setHot] = useState([])
  
  const [ranking, setRanking] = useState([])
  // console.log('ranking', ranking);

  const [anchor, setAnchor] = useState([])

  const [singer, setSinger] = useState([])

  const [CD, setCD] = useState([])
  React.useEffect(() => {
    render()
  }, [])
  // 取得数据
  const render = () => {

    // 热门推荐
    HomeHttp.Recommend(8)
      .then(res => setHot([...res.result]))

    // 新碟上架
    HomeHttp.newCD()
      .then(res => setCD([...res.weekData]))
    // console.log('新片',CD);

    // 排行榜
    HomeHttp.allList()
      .then(res => console.log('排行榜', res))

    // 歌手
    HomeHttp.singer(5)
      .then(res => {
        console.log('singer', res.artists);
        setSinger([...res.artists])
      })

    // 主播
    HomeHttp.popularAnchor(5)
      .then(res => {
        setAnchor([...res.data.list])
        console.log('主播',res);
      })


  }
  return (
    <div>
      <Banner></Banner>
      <div className='body'>
        <div className='main'>
          <div className='left'>
            {/* 热门推荐 */}
            <div className='hotRecommend'>
              <div className='Breadcrumb'>
                <h6>热门推荐</h6>
                <Breadcrumb separator="|" style={{ paddingTop: '18px', boxSizing: 'border-box' }}>
                  {breadItem.map(item => <Breadcrumb.Item key={item.title} href={item.href}>{item.title}</Breadcrumb.Item>)}
                </Breadcrumb>
                <span>
                  <Breadcrumb items={[{ title: '更多>', href: '' }]} />
                </span>

              </div>
              <Side list={hot} />
            </div>
            {/* 新碟上架 */}
            <div className='newCD'>
              <div className='Breadcrumb'>
                <h6>新碟上架</h6>

                <span>
                  <Breadcrumb items={[{ title: '更多', href: '' }]} />
                </span>

              </div>

              <div className='CD' style={{ display: 'flex' }}>
                {
                  CD.map(item => {
                    return <>
                      <div style={{ margin: 20 }}>
                        <img style={{ width: 130, height: 130 }} src={item.picUrl} alt="" />
                        <p>{item.name}</p>
                      </div>

                    </>
                  })
                }
              </div>
            </div>
            {/* 榜单 */}
            <div className='list'>

              <div className='Breadcrumb'>
                <h6>榜单</h6>

                <span>
                  <Breadcrumb items={[{ title: '更多', href: '' }]} />
                </span>
              </div>

              <div style={{ display: 'flex' }}>
                {/* 飙升榜 */}
                <Table id={19723756} />
                {/* 新歌榜 */}
                <Table id={3779629} />
                {/* 原创榜 */}
                <Table id={2884035} />
              </div>



            </div>
          </div>
          <div className='right'>
            <div className='singer'>
              <List
                header={<div>歌手榜</div>}
                footer={<div>更多</div>}
                bordered
                dataSource={singer}
                renderItem={(item) => (
                  <List.Item
                  key={item.id}
                  >
                  <List.Item.Meta
                  avatar={<Avatar src={item.img1v1Url} />}
                  // style={{display:'flex'}}
                   title={item.name}>
                   

                  </List.Item.Meta>
                  </List.Item>
                )}
              />
            </div>

            <div className='zhubo'>
            <List
                header={<div>主播榜</div>}
                footer={<div>更多</div>}
                bordered
                dataSource={anchor}
                renderItem={(item) => (
                  <List.Item
                  key={item.id}
                  >
                  <List.Item.Meta
                  avatar={<Avatar src={item.avatarUrl} />}
                  // style={{display:'flex'}}
                   title={item.nickName}>
                   

                  </List.Item.Meta>
                  </List.Item>
                )}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
